<template>
    <div>
        <el-card>
            <div style="display: flex;justify-content: space-between; align-items: center;">
                <div>
                    <el-input placeholder="请输入编码" size="mini" style="width: 305px;">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <div style="display: flex; align-items: center;">
                    <i style="width: 1px; height: 15px; background-color: #a8a8a8;"></i>
                    <el-button type="text" style="margin-left: 10px;">
                        <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button type="text">
                        <i class="el-icon-edit"></i>
                    </el-button>
                </div>
            </div>
        </el-card>
        <el-card class="box-card">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div style="display: flex; ">
                    <div style="margin: 5px 10px 0px 0px;" class="el-icon-platform-eleme"></div>
                    <div style="font-size: large;font-weight: 800; ">采购订单详情</div>
                </div>
                <div>
                    <el-button type="primary">导出</el-button>
                </div>
            </div>
            <div style="margin-top: 20px;">
                <el-table :data="tableData" stripe size="small " border>
                    <el-table-column prop="date" label="#" width="50" type="index">
                    </el-table-column>
                    <el-table-column prop="name" label="订单编号">
                    </el-table-column>
                    <el-table-column prop="name" label="采购单位">
                    </el-table-column>
                    <el-table-column prop="name" label="店铺名称">
                    </el-table-column>
                    <el-table-column prop="name" label="下单用户">
                    </el-table-column>
                    <el-table-column prop="name" label="下单时间">
                    </el-table-column>
                    <el-table-column prop="name" label="订单金额" align="right">
                    </el-table-column>
                    <el-table-column prop="name" label="成交金额" align="right">
                    </el-table-column>
                    <el-table-column prop="name" label="订单状态" align="center">
                        <template slot-scope="{row}">
                            <i class="dot"></i>
                            <span style="margin-left: 10px">{{ row.date }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </el-card>

    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                id: '12987122',
                name: '王小虎',
                amount1: '234',
                amount2: '3.2',
                amount3: 10,
                date: "待签收"
            }, {
                id: '12987123',
                name: '王小虎',
                amount1: '165',
                amount2: '4.43',
                amount3: 12,
                date: "待签署"
            }, {
                id: '12987124',
                name: '王小虎',
                amount1: '324',
                amount2: '1.9',
                amount3: 9,
                date: "待审批"
            }, {
                id: '12987125',
                name: '王小虎',
                amount1: '621',
                amount2: '2.2',
                amount3: 17,
                date: "待签署"
            }, {
                id: '12987126',
                name: '王小虎',
                amount1: '539',
                amount2: '4.1',
                amount3: 15,
                date: "待签署"      
            }]
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-card__body {
    padding: 10px;

}

.dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #c1c1c1;
}

.dotone {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #84d436;
}
</style>